<template>
    <el-form ref="form" label-width="100px" :model="form" :inline="inline">
        <el-form-item v-for="item in formLabel" :key="item.label" :label="item.label">
            <el-input
                v-if="item.type === 'input' "
                :placeholder=" '请输入' + item.label "
                v-model="form[item.model]"
            ></el-input>

            <el-input
                v-if="item.type === 'password' "
                :type ="passw"
                :placeholder=" item.content "
                v-model="form[item.model]"
                style="width: 400px"
            >
                <em slot="suffix" :class="icon" @click="showPass"></em>
            </el-input>

            <el-switch v-if="item.type === 'switch'" v-model="form[item.model]"></el-switch>

            <el-data-picker
                v-if="item.type === 'date'"
                type = "date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-model="form[item.label]"
            ></el-data-picker>

            <el-select
                v-if="item.type === 'select'"
                placeholder = "请选择"
                v-model="form[item.model]"    
            >
                <el-option
                    v-for="item in item.opts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value" 
                ></el-option>
            </el-select>
        </el-form-item>
        <!-- 如果上述的组件都不满足 这是拓展 -->
        <el-form-item><slot></slot></el-form-item>
    </el-form>
</template>

<script>
export default {
    name: 'CommonForm',
    props: {
        formLabel: Array,
        form: Object,
        inline: Boolean
    },
    data () {
        return {
            icon: "el-input__icon el-icon-view",
            passw: "password"
        }
    },
    methods:{
        //密码的隐藏和显示
        showPass() {
            //点击图标是密码隐藏或显示
            if (this.passw == "text") {
                this.passw = "password";
                //更换图标
                this.icon = "el-input__icon el-icon-view";
            } else {
                this.passw = "text";
                this.icon = "el-input__icon el-icon-refresh-left";
            }
        }
    }

}
</script>

